<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { Refresh, Star, Clock } from '@element-plus/icons-vue'
  import { page as getWeiboPage, topList as getTopList } from '@/api/weibo'
  import { Weibo, WeiboPageParam } from '@/types/api'
  import { PageData } from '@/types/resp'
  import MomentCard from './components/MomentCard.vue'
  import MomentSkeleton from './components/MomentSkeleton.vue'

  // 响应式数据
  const loading = ref(false)
  const loadingMore = ref(false)
  const topWeibos = ref<Weibo[]>([])
  const weibos = ref<Weibo[]>([])
  const pageData = ref<PageData<Weibo>>({
    current: 1,
    pages: 0,
    size: 10,
    total: 0,
    records: [],
  })

  // 分页参数
  const pageParam = ref<WeiboPageParam>({
    pageSize: 10,
    pageNum: 1,
  })

  // 是否有更多数据
  const hasMore = ref(true)

  // 获取置顶微博
  const loadTopWeibos = async () => {
    try {
      const data = await getTopList()
      topWeibos.value = data || []
    } catch (error) {
      console.error('获取置顶微博失败:', error)
    }
  }

  // 获取微博列表
  const loadWeibos = async (isLoadMore = false) => {
    if (isLoadMore) {
      loadingMore.value = true
    } else {
      loading.value = true
    }

    try {
      const data = await getWeiboPage(pageParam.value)
      pageData.value = data

      if (isLoadMore) {
        weibos.value.push(...data.records)
      } else {
        weibos.value = data.records
      }

      hasMore.value = data.current < data.pages
    } catch (error) {
      console.error('获取微博列表失败:', error)
      ElMessage.error('加载失败，请重试')
    } finally {
      loading.value = false
      loadingMore.value = false
    }
  }

  // 加载更多
  const loadMore = async () => {
    if (!hasMore.value || loadingMore.value) {
      return
    }

    pageParam.value.pageNum = pageData.value.current + 1
    await loadWeibos(true)
  }

  // 刷新数据
  const refresh = async () => {
    pageParam.value.pageNum = 1
    await Promise.all([loadTopWeibos(), loadWeibos()])
  }

  // 初始化数据
  onMounted(async () => {
    await refresh()
  })
</script>

<template>
  <div class="moments-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <div class="header-content">
          <div class="header-info">
            <h1 class="page-title">
              <span class="title-icon">💬</span>
              瞬间
            </h1>
            <p class="page-description">记录生活中的美好瞬间</p>
          </div>
          <div class="header-actions">
            <el-button
              type="primary"
              :icon="Refresh"
              :loading="loading"
              circle
              title="刷新"
              @click="refresh"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="page-content">
      <div class="container">
        <!-- 置顶微博 -->
        <div v-if="topWeibos.length > 0" class="top-moments">
          <div class="section-title">
            <el-icon class="title-icon"><Star /></el-icon>
            <span>置顶瞬间</span>
          </div>
          <div class="moments-list">
            <MomentCard
              v-for="weibo in topWeibos"
              :key="`top-${weibo.id}`"
              :weibo="weibo"
              :is-top="true"
            />
          </div>
        </div>

        <!-- 普通微博 -->
        <div class="normal-moments">
          <div v-if="topWeibos.length > 0" class="section-title">
            <el-icon class="title-icon"><Clock /></el-icon>
            <span>最新瞬间</span>
          </div>

          <!-- 加载中的骨架屏 -->
          <div v-if="loading" class="moments-list">
            <MomentSkeleton v-for="i in 3" :key="i" />
          </div>

          <!-- 微博列表 -->
          <div v-else-if="weibos.length > 0" class="moments-list">
            <MomentCard v-for="weibo in weibos" :key="weibo.id" :weibo="weibo" :is-top="false" />
          </div>

          <!-- 空状态 -->
          <div v-else class="empty-state">
            <div class="empty-icon">📝</div>
            <h3>暂无瞬间</h3>
            <p>还没有发布任何瞬间，期待第一条动态～</p>
          </div>
        </div>

        <!-- 加载更多 -->
        <div v-if="weibos.length > 0" class="load-more">
          <el-button
            v-if="hasMore"
            :loading="loadingMore"
            size="large"
            type="primary"
            plain
            @click="loadMore"
          >
            {{ loadingMore ? '加载中...' : '加载更多' }}
          </el-button>
          <div v-else class="no-more">
            <span>没有更多内容了</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .moments-page {
    min-height: 100vh;
    background: var(--bg-color);
  }

  .page-header {
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-bottom: 2rem;

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 1rem;
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .header-info {
      .page-title {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 0.5rem 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .title-icon {
          font-size: 1.8rem;
        }
      }

      .page-description {
        color: var(--text-secondary);
        margin: 0;
        font-size: 1rem;
      }
    }
  }

  .page-content {
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 1rem;
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);

    .title-icon {
      color: var(--primary-color);
    }
  }

  .moments-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .top-moments {
    margin-bottom: 3rem;
  }

  .normal-moments {
    margin-bottom: 2rem;
  }

  .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);

    .empty-icon {
      font-size: 4rem;
      margin-bottom: 1rem;
    }

    h3 {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
      color: var(--text-primary);
    }

    p {
      font-size: 1rem;
      margin: 0;
    }
  }

  .load-more {
    text-align: center;
    padding: 2rem 0;

    .no-more {
      color: var(--text-secondary);
      font-size: 0.9rem;
    }
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .page-header {
      padding: 1.5rem 0;
      margin-bottom: 1.5rem;

      .header-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
      }

      .page-title {
        font-size: 1.5rem !important;
      }
    }

    .container {
      padding: 0 0.75rem !important;
    }

    .moments-list {
      gap: 1rem;
    }

    .empty-state {
      padding: 2rem 1rem;

      .empty-icon {
        font-size: 3rem;
      }

      h3 {
        font-size: 1.2rem;
      }
    }
  }
</style>
